<!--<template>-->
<!--  <div class="course-detail-page">-->
<!--    &lt;!&ndash; 面包屑 &ndash;&gt;-->
<!--    <div class="breadcrumb">-->
<!--      <el-breadcrumb separator="/">-->
<!--        <el-breadcrumb-item><a href="/">首页</a></el-breadcrumb-item>-->
<!--        <el-breadcrumb-item>{{ course.subjectParentTitle }}</el-breadcrumb-item>-->
<!--        <el-breadcrumb-item>{{ course.subjectTitle }}</el-breadcrumb-item>-->
<!--      </el-breadcrumb>-->
<!--    </div>-->

<!--    &lt;!&ndash; 主体区域 &ndash;&gt;-->
<!--    <div class="course-main">-->
<!--      &lt;!&ndash; 左侧视频预览 &ndash;&gt;-->
<!--      <div class="video-box">-->
<!--        <div class="video-wrapper">-->
<!--          <img :src="course.cover" class="video-cover"/>-->
<!--          <div class="play-button">-->
<!--            <i class="el-icon-video-play"></i>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->

<!--      &lt;!&ndash; 右侧课程信息 &ndash;&gt;-->
<!--      <div class="info-box">-->
<!--        <h1 class="title">{{ course.title }}</h1>-->

<!--        <div class="price-box">-->
<!--          <span class="label">价格：</span>-->
<!--          <span class="price">¥{{ course.price }}</span>-->
<!--        </div>-->

<!--        <div class="teacher-box">-->
<!--          <img :src="course.avatar" class="avatar"/>-->
<!--          <div class="teacher-info">-->
<!--            <p class="name">{{ course.teacherName }}</p>-->
<!--            <p class="intro">{{ course.intro }}</p>-->
<!--          </div>-->
<!--        </div>-->

<!--        <div class="stats-box">-->
<!--          <span>{{ course.buyCount }}人已购买</span>-->
<!--          <span>{{ course.lessonNum }}课时</span>-->
<!--          <span>{{ course.viewCount }}次浏览</span>-->
<!--        </div>-->

<!--        <div class="button-group">-->
<!--          <el-button-->
<!--            :type="buyOrwatch === '购买课程' ? 'success' : 'primary'"-->
<!--            :icon="buyOrwatch === '购买课程' ? 'el-icon-shopping-cart-full' : 'el-icon-caret-right'"-->
<!--            @click="handleCourse"-->
<!--          >-->
<!--            {{ buyOrwatch }}-->
<!--          </el-button>-->

<!--          <el-button plain icon="el-icon-star-off">收藏课程</el-button>-->
<!--        </div>-->

<!--      </div>-->
<!--    </div>-->

<!--    &lt;!&ndash; 详情区 &ndash;&gt;-->
<!--    <el-tabs v-model="activeTab" class="tabs-box">-->
<!--      <el-tab-pane label="课程详情" name="detail">-->
<!--        <div class="tab-content" v-html="course.description"></div>-->
<!--      </el-tab-pane>-->
<!--      <el-tab-pane label="课程大纲" name="outline">-->
<!--        <div class="curriculum">-->
<!--          <div v-for="chapter in chapterSectionList" :key="chapter.id" class="chapter-card">-->
<!--            <h3 class="chapter-title">{{ chapter.title }}</h3>-->
<!--            <ul class="section-list" style="margin-left: 25px;">-->
<!--              <li-->
<!--                v-for="section in chapter.children"-->
<!--                :key="section.id"-->
<!--                class="section-item"-->
<!--              >-->
<!--                <a :href="'/video/' + section.videoSourceId" target="_blank">-->
<!--                  <el-tag size="mini" type="success" v-if="section.isFree">免费试听</el-tag>-->
<!--                  {{ section.title }}-->
<!--                </a>-->
<!--              </li>-->
<!--            </ul>-->
<!--          </div>-->
<!--        </div>-->
<!--      </el-tab-pane>-->
<!--    </el-tabs>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import courseApi from '@/api/course'-->
<!--import orderApi from '@/api/order'-->

<!--export default {-->
<!--  data() {-->
<!--    return {-->
<!--      userId: null,-->
<!--      course: {},-->
<!--      chapterSectionList: [],-->
<!--      activeTab: 'detail',-->
<!--      buyOrwatch: ''-->
<!--    }-->
<!--  },-->
<!--  async asyncData({params}) {-->
<!--    const courseId = params.courseId-->
<!--    // 这里不传 userId，后端返回默认数据-->
<!--    const res = await courseApi.getCourseInfo(courseId, null)-->
<!--    const course = res.data.data-->
<!--    const chapterSectionList = course.chapterVoList-->

<!--    let buyOrwatch = ''-->
<!--    if (course.purchase === true) {-->
<!--      buyOrwatch = '立即观看'-->
<!--    } else {-->
<!--      buyOrwatch = typeof course.price !== 'undefined' ? (course.price === 0 ? '立即观看' : '购买课程') : '购买课程'-->
<!--    }-->

<!--    return {-->
<!--      course,-->
<!--      chapterSectionList,-->
<!--      buyOrwatch-->
<!--    }-->
<!--  },-->

<!--  async mounted() {-->
<!--    try {-->
<!--      const userInfo = JSON.parse(localStorage.getItem('userInfo'))-->
<!--      if (userInfo?.id) {-->
<!--        this.userId = userInfo.id-->

<!--        // 重新请求接口，带 userId-->
<!--        const courseId = this.$route.params.courseId-->
<!--        const res = await courseApi.getCourseInfo(courseId, this.userId)-->
<!--        const course = res.data.data-->
<!--        this.course = course-->
<!--        this.chapterSectionList = course.chapterVoList-->

<!--        if (course.purchase === true) {-->
<!--          this.buyOrwatch = '立即观看'-->
<!--        } else {-->
<!--          this.buyOrwatch = typeof course.price !== 'undefined' ? (course.price === 0 ? '立即观看' : '购买课程') : '购买课程'-->
<!--        }-->
<!--      }-->
<!--    } catch (e) {-->
<!--      console.warn('用户信息解析失败', e)-->
<!--    }-->
<!--  },-->

<!--  methods: {-->
<!--    async handleCreateOrder() {-->
<!--      try {-->
<!--        const res = await orderApi.createOrder(this.course.id)-->
<!--        if (res.data.code === 20000) {-->
<!--          const orderId = res.data.data-->
<!--          this.$router.push(`/order/${orderId}`)-->
<!--        } else {-->
<!--          this.$message.error('创建订单失败，请稍后再试')-->
<!--        }-->
<!--      } catch (err) {-->
<!--        console.error(err)-->
<!--        this.$message.error('请先登录后再购买')-->
<!--        this.$router.push('/')  // 如果没登录跳转登录页-->
<!--      }-->
<!--    },-->

<!--    handleCourse() {-->
<!--      if (this.course.price === 0 || this.buyOrwatch === '立即观看') {-->
<!--        this.$router.push('/video/' + this.chapterSectionList[0].children[0].videoSourceId)-->
<!--      } else {-->
<!--        this.handleCreateOrder()-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->

<!--<style scoped>-->
<!--.course-detail-page {-->
<!--  max-width: 1200px;-->
<!--  margin: 0 auto;-->
<!--  padding: 20px;-->
<!--}-->

<!--/* 面包屑 */-->
<!--.breadcrumb {-->
<!--  margin-bottom: 20px;-->
<!--}-->

<!--/* 主区域布局 */-->
<!--.course-main {-->
<!--  display: flex;-->
<!--  flex-wrap: wrap;-->
<!--  gap: 40px;-->
<!--  margin-bottom: 30px;-->
<!--}-->

<!--.video-box {-->
<!--  flex: 1.5;-->
<!--  min-width: 300px;-->
<!--}-->

<!--.video-wrapper {-->
<!--  position: relative;-->
<!--  border-radius: 10px;-->
<!--  overflow: hidden;-->
<!--}-->

<!--.video-cover {-->
<!--  width: 100%;-->
<!--  height: auto;-->
<!--  display: block;-->
<!--}-->

<!--.play-button {-->
<!--  position: absolute;-->
<!--  top: 50%;-->
<!--  left: 50%;-->
<!--  transform: translate(-50%, -50%);-->
<!--  width: 64px;-->
<!--  height: 64px;-->
<!--  border-radius: 50%;-->
<!--  background: rgba(0, 0, 0, 0.45);-->
<!--  display: flex;-->
<!--  justify-content: center;-->
<!--  align-items: center;-->
<!--  cursor: pointer;-->
<!--  transition: background 0.2s ease;-->
<!--}-->

<!--.play-button:hover {-->
<!--  background: rgba(0, 0, 0, 0.65);-->
<!--}-->

<!--.play-button i {-->
<!--  color: white;-->
<!--  font-size: 28px;-->
<!--}-->

<!--/* 信息盒子 */-->
<!--.info-box {-->
<!--  flex: 1;-->
<!--  min-width: 300px;-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--  justify-content: space-between;-->
<!--  padding-bottom: 12px;-->
<!--  gap: 20px;-->
<!--  margin-left: 20px !important;-->
<!--}-->

<!--.title {-->
<!--  font-size: 24px;-->
<!--  font-weight: 600;-->
<!--  color: #333;-->
<!--  margin-bottom: 6px;-->
<!--}-->

<!--.price-box {-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  gap: 6px;-->
<!--}-->

<!--.price-box .label {-->
<!--  font-weight: 500;-->
<!--  color: #888;-->
<!--}-->

<!--.price-box .price {-->
<!--  font-size: 22px;-->
<!--  color: #f56c6c;-->
<!--}-->

<!--.teacher-box {-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  gap: 12px;-->
<!--  background: #f9f9f9;-->
<!--  padding: 10px;-->
<!--  border-radius: 8px;-->
<!--}-->

<!--.avatar {-->
<!--  width: 48px;-->
<!--  height: 48px;-->
<!--  border-radius: 50%;-->
<!--}-->

<!--.teacher-info .name {-->
<!--  font-weight: 600;-->
<!--}-->

<!--.teacher-info .intro {-->
<!--  font-size: 13px;-->
<!--  color: #666;-->
<!--}-->

<!--.stats-box {-->
<!--  display: flex;-->
<!--  justify-content: flex-start;-->
<!--  gap: 18px;-->
<!--  font-size: 14px;-->
<!--  color: #999;-->
<!--}-->

<!--.button-group {-->
<!--  display: flex;-->
<!--  gap: 12px;-->
<!--  margin-top: auto;-->
<!--}-->

<!--/* 标签内容 */-->
<!--.tabs-box {-->
<!--  background: #fff;-->
<!--  padding: 20px;-->
<!--  border-radius: 10px;-->
<!--}-->

<!--.tab-content {-->
<!--  line-height: 1.7;-->
<!--  color: #333;-->
<!--  padding-top: 10px;-->
<!--}-->

<!--/* 大纲美化 */-->
<!--.curriculum {-->
<!--  margin-top: 10px;-->
<!--}-->

<!--.chapter-card {-->
<!--  margin-bottom: 28px;-->
<!--  background: #fdfdfd;-->
<!--  border: 1px solid #eee;-->
<!--  border-radius: 10px;-->
<!--  padding: 18px;-->
<!--}-->

<!--.chapter-title {-->
<!--  font-size: 18px;-->
<!--  font-weight: 600;-->
<!--  margin-bottom: 14px;-->
<!--  color: #444;-->
<!--}-->

<!--.section-list {-->
<!--  padding-left: 0;-->
<!--  list-style: none;-->
<!--}-->

<!--.section-item {-->
<!--  margin: 10px 0;-->
<!--  font-size: 14px;-->
<!--}-->

<!--.section-item a {-->
<!--  color: #333;-->
<!--  text-decoration: none;-->
<!--  transition: color 0.2s;-->
<!--}-->

<!--.section-item a:hover {-->
<!--  color: #409EFF;-->
<!--}-->
<!--</style>-->
<template>
  <div class="course-detail-page">
    <!-- 面包屑 -->
    <div class="breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><a href="/">首页</a></el-breadcrumb-item>
        <el-breadcrumb-item>{{ course.subjectParentTitle }}</el-breadcrumb-item>
        <el-breadcrumb-item>{{ course.subjectTitle }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 主体区域 -->
    <div class="course-main">
      <!-- 左侧视频预览 -->
      <div class="video-box">
        <div class="video-wrapper">
          <img :src="course.cover" class="video-cover"/>
          <div class="play-button">
            <i class="el-icon-video-play"></i>
          </div>
        </div>
      </div>

      <!-- 右侧课程信息 -->
      <div class="info-box">
        <h1 class="title">{{ course.title }}</h1>

        <div class="price-box">
          <span class="label">价格：</span>
          <span class="price">¥{{ course.price }}</span>
        </div>

        <div class="teacher-box">
          <img :src="course.avatar" class="avatar"/>
          <div class="teacher-info">
            <p class="name">{{ course.teacherName }}</p>
            <p class="intro">{{ course.intro }}</p>
          </div>
        </div>

        <div class="stats-box">
          <span>{{ course.buyCount }}人已购买</span>
          <span>{{ course.lessonNum }}课时</span>
          <span>{{ course.viewCount }}次浏览</span>
        </div>

        <div class="button-group">
          <el-button
            :type="buyOrwatch === '购买课程' ? 'success' : 'primary'"
            :icon="buyOrwatch === '购买课程' ? 'el-icon-shopping-cart-full' : 'el-icon-caret-right'"
            @click="handleCourse"
          >
            {{ buyOrwatch }}
          </el-button>

          <el-button plain icon="el-icon-star-off">收藏课程</el-button>
        </div>
      </div>
    </div>

    <!-- 详情区 -->
    <el-tabs v-model="activeTab" class="tabs-box">
      <el-tab-pane label="课程详情" name="detail">
        <div class="tab-content" v-html="course.description"></div>
      </el-tab-pane>
      <el-tab-pane label="课程大纲" name="outline">
        <div class="curriculum">
          <div v-for="chapter in chapterSectionList" :key="chapter.id" class="chapter-card">
            <h3 class="chapter-title">{{ chapter.title }}</h3>
            <ul class="section-list" style="margin-left: 25px;">
              <li
                v-for="section in chapter.children"
                :key="section.id"
                class="section-item"
              >
                <a :href="'/video/' + section.videoSourceId" target="_blank">
                  <el-tag size="mini" type="success" v-if="section.isFree">免费试听</el-tag>
                  {{ section.title }}
                </a>
              </li>
            </ul>
          </div>
        </div>
      </el-tab-pane>

      <!-- 新增课程评价Tab -->
      <el-tab-pane label="课程评价" name="comment">
        <CommentSection
          :targetId="course.id"
          targetType="COURSE"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import courseApi from '@/api/course'
import orderApi from '@/api/order'
import CommentSection from '@/components/CommentSection'

export default {
  components: {
    CommentSection
  },
  data() {
    return {
      userId: null,
      course: {},
      chapterSectionList: [],
      activeTab: 'detail',
      buyOrwatch: ''
    }
  },
  async asyncData({ params }) {
    const courseId = params.courseId
    // 这里不传 userId，后端返回默认数据
    const res = await courseApi.getCourseInfo(courseId, null)
    const course = res.data.data
    const chapterSectionList = course.chapterVoList

    let buyOrwatch = ''
    if (course.purchase === true) {
      buyOrwatch = '立即观看'
    } else {
      buyOrwatch = typeof course.price !== 'undefined' ? (course.price === 0 ? '立即观看' : '购买课程') : '购买课程'
    }

    return {
      course,
      chapterSectionList,
      buyOrwatch
    }
  },

  async mounted() {
    try {
      const userInfo = JSON.parse(localStorage.getItem('userInfo'))
      if (userInfo?.id) {
        this.userId = userInfo.id

        // 重新请求接口，带 userId
        const courseId = this.$route.params.courseId
        const res = await courseApi.getCourseInfo(courseId, this.userId)
        const course = res.data.data
        this.course = course
        this.chapterSectionList = course.chapterVoList

        if (course.purchase === true) {
          this.buyOrwatch = '立即观看'
        } else {
          this.buyOrwatch = typeof course.price !== 'undefined' ? (course.price === 0 ? '立即观看' : '购买课程') : '购买课程'
        }
      }
    } catch (e) {
      console.warn('用户信息解析失败', e)
    }
  },

  methods: {
    async handleCreateOrder() {
      try {
        const res = await orderApi.createOrder(this.course.id)
        if (res.data.code === 20000) {
          const orderId = res.data.data
          this.$router.push(`/order/${orderId}`)
        } else {
          this.$message.error('创建订单失败，请稍后再试')
        }
      } catch (err) {
        console.error(err)
        this.$message.error('请先登录后再购买')
        this.$router.push('/')  // 如果没登录跳转登录页
      }
    },

    handleCourse() {
      if (this.course.price === 0 || this.buyOrwatch === '立即观看') {
        this.$router.push('/video/' + this.chapterSectionList[0].children[0].videoSourceId)
      } else {
        this.handleCreateOrder()
      }
    }
  }
}
</script>

<style scoped>
.tabs-box >>> .el-tabs__item {
  font-size: 16px !important;
  font-weight: normal !important;
}
.course-detail-page {
  max-width: 960px;
  margin: 20px auto;
  padding: 0 16px;
}


 .course-detail-page {
   max-width: 1200px;
   margin: 0 auto;
   padding: 20px;
 }

/* 面包屑 */
.breadcrumb {
  margin-bottom: 20px;
}

/* 主区域布局 */
.course-main {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  margin-bottom: 30px;
}

.video-box {
  flex: 1.5;
  min-width: 300px;
}

.video-wrapper {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
}

.video-cover {
  width: 100%;
  height: auto;
  display: block;
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: background 0.2s ease;
}

.play-button:hover {
  background: rgba(0, 0, 0, 0.65);
}

.play-button i {
  color: white;
  font-size: 28px;
}

/* 信息盒子 */
.info-box {
  flex: 1;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 12px;
  gap: 20px;
  margin-left: 20px !important;
}

.title {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin-bottom: 6px;
}

.price-box {
  display: flex;
  align-items: center;
  gap: 6px;
}

.price-box .label {
  font-weight: 500;
  color: #888;
}

.price-box .price {
  font-size: 22px;
  color: #f56c6c;
}

.teacher-box {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f9f9f9;
  padding: 10px;
  border-radius: 8px;
}

.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.teacher-info .name {
  font-weight: 600;
}

.teacher-info .intro {
  font-size: 13px;
  color: #666;
}

.stats-box {
  display: flex;
  justify-content: flex-start;
  gap: 18px;
  font-size: 14px;
  color: #999;
}

.button-group {
  display: flex;
  gap: 12px;
  margin-top: auto;
}

/* 标签内容 */
.tabs-box {
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  font-size: 18px;
}

.tab-content {
  line-height: 1.7;
  color: #333;
  padding-top: 10px;
}

/* 大纲美化 */
.curriculum {
  margin-top: 10px;
}

.chapter-card {
  margin-bottom: 28px;
  background: #fdfdfd;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 18px;
}

.chapter-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 14px;
  color: #444;
}

.section-list {
  padding-left: 0;
  list-style: none;
}

.section-item {
  margin: 10px 0;
  font-size: 14px;
}

.section-item a {
  color: #333;
  text-decoration: none;
  transition: color 0.2s;
}

.section-item a:hover {
  color: #409EFF;
}
</style>

